<template>
  <div class="home">
    <AppHeader />
    <main class="main-content">
      <!-- 导航分类 -->
      <div class="nav-categories">
        <div class="nav-item">
          <span>大音乐厅</span>
        </div>
        <div class="nav-item">
          <span>明星频道</span>
        </div>
        <div class="nav-item">
          <span>精品电台</span>
        </div>
        <div class="nav-item">
          <span>视频专区</span>
        </div>
      </div>

      <!-- 推荐歌单 -->
      <section class="section">
        <div class="section-header">
          <h2 class="section-title">歌单推荐</h2>
          <a class="more-link">更多 ></a>
        </div>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else class="playlist-grid">
          <PlaylistCard 
            v-for="playlist in playlists" 
            :key="playlist.id"
            :playlist="playlist"
          />
        </div>
      </section>

      <!-- 新歌速递 -->
      <section class="section">
        <div class="section-header">
          <h2 class="section-title">新歌速递</h2>
          <a class="more-link">更多 ></a>
        </div>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else class="song-list">
          <SongItem
            v-for="song in songs"
            :key="song.id"
            :song="song"
          />
        </div>
      </section>

      <!-- 新碟上架 -->
      <section class="section">
        <div class="section-header">
          <h2 class="section-title">新碟上架</h2>
          <a class="more-link">更多 ></a>
        </div>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else class="album-grid">
          <AlbumCard
            v-for="album in albums"
            :key="album.id"
            :album="album"
          />
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { playlistAPI, songAPI, albumAPI } from '@/api'
import type { PlaylistInfo, SongInfo, AlbumInfo } from '@/types'
import AppHeader from '@/components/AppHeader.vue'
import PlaylistCard from '@/components/PlaylistCard.vue'
import SongItem from '@/components/SongItem.vue'
import AlbumCard from '@/components/AlbumCard.vue'

const playlists = ref<PlaylistInfo[]>([])
const songs = ref<SongInfo[]>([])
const albums = ref<AlbumInfo[]>([])
const loading = ref(true)
const error = ref('')

const fetchData = async () => {
  try {
    loading.value = true
    error.value = ''

    const [playlistRes, songRes, albumRes] = await Promise.all([
      playlistAPI.getRecommendPlaylists({ pageNo: 1, type: 1 }),
      songAPI.getNewSongs({ pageNo: 1, pageSize: 10 }),
      albumAPI.getNewAlbums({ pageNo: 1, pageSize: 10 })
    ])

    console.log('API responses:', {
      playlists: playlistRes,
      songs: songRes,
      albums: albumRes
    })

    playlists.value = playlistRes.data.list || []
    songs.value = songRes.data.list || []
    albums.value = albumRes.data.list || []

  } catch (err) {
    console.error('Failed to fetch data:', err)
    error.value = '数据加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

onMounted(fetchData)
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: #f5f5f5;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.nav-categories {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 8px;
}

.nav-item {
  cursor: pointer;
  font-size: 16px;
  color: #333;
}

.nav-item:hover {
  color: var(--primary-color);
}

.section {
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #666;
  cursor: pointer;
}

.more-link:hover {
  color: var(--primary-color);
}

.playlist-grid,
.album-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.song-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.error {
  text-align: center;
  padding: 40px;
  color: #ff4d4f;
}
</style> 